<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Paste</title>
    <link rel="icon" th:href="@{/public/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/styles/atom-one-light.min.css">
    <style type="text/css">
        /* for block of numbers */
        .hljs-ln-numbers {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

            text-align: right;
            color: #ccc;
            border-right: 1px solid #CCC;
            vertical-align: top;
            padding-right: 4px !important;

            /* your custom style here */
        }
        /* for block of code */
        .hljs-ln-code {
            padding-left: 8px !important;
        }
        pre code.hljs {
            padding-right: 5px !important;
            padding-left: 5px !important;
        }
    </style>
</head>

<body>

<div class="container mt-4">
    <div class="row">
        <div th:text="'Author : '+${paste.author}" class="col-12 col-sm">
        </div>
        <div th:text="'Language : '+${paste.language}" class="col-12 col-sm">
        </div>
        <div th:text="'Expiration : '+${#dates.format(paste.expirationTime, 'yyyy-MM-dd HH:mm')}" class="col-12 col-sm">
        </div>
    </div>
    <div th:unless="${#strings.isEmpty(paste.description)}" class="row">
        <div th:text="'Description : '+${paste.description}" class="col">
        </div>
    </div>
    <div class="row mt-2">
        <div class="col">
            <a th:data-clipboard-text="${paste.code}"
               class="copy btn btn btn-outline-primary btn-sm">
                COPY CODE
            </a>
            <a th:data-clipboard-text="${#httpServletRequest.requestURL}"
               class="copy btn btn btn-outline-success btn-sm ml-2">
                COPY URL
            </a>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <pre><code th:class="${paste.language}" th:text="${paste.code}"></code></pre>
        </div>
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/highlight.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
<script>hljs.highlightAll();hljs.initLineNumbersOnLoad();</script>
<script>new ClipboardJS('.copy');</script>
</body>

</html>